<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品上架</title>
    <!--导入样式-->
    <link rel="stylesheet" th:href="@{/css/register.css}">
    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css"
          th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}">
    </script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
</head>
<body>
<form name="groundingForm" id="groundingForm" method="post" style="width:50%; margin:0
auto">
    <h1 align="center">上&emsp;&emsp;架</h1>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品名称：</p>
            </div>
            <div class="col-md-5">
                <input id="goodsName" name="goodsName" class="form-control"
                       type="text" placeholder="商品名称" required="true"
                       minlength="1" maxlength="30"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品标题：</p>
            </div>
            <div class="col-md-5">
                <input id="goodsTitle" name="goodsTitle" class="form-control"
                       type="text" placeholder="商品标题" required="true"
                       minlength="1" maxlength="30"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品图片：</p>
            </div>

            <input type="file" id="file" class="img">

            <div class="col-md-5">
                <input id="goodsImg" name="goodsImg" class="form-control"
                       type="hidden" placeholder="商品图片" required="true"
                       minlength="1" maxlength="30"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品描述：</p>
            </div>
            <div class="col-md-5">
                <input id="goodsDetail" name="goodsDetail" class="form-control"
                       type="text" placeholder="商品描述" required="true"
                       minlength="1" maxlength="100"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品价格：</p>
            </div>
            <div class="col-md-5">
                <input id="goodsPrice" name="goodsPrice" class="form-control"
                       type="text" placeholder="商品价格" required="true"
                       minlength="1" maxlength="30"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品库存：</p>
            </div>
            <div class="col-md-5">
                <input id="goodsStock" name="goodsStock" class="form-control"
                       type="text" placeholder="商品库存" required="true"
                       minlength="1" maxlength="30"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-5">
                <p>商品类别：</p>
            </div>
            <div class="col-md-5">
                <input id="goodsCategory" name="goodsCategory" class="form-control"
                       type="text" placeholder="商品类别" required="true"
                       minlength="1" maxlength="30"/>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <button class="btn btn-primary btn-block" type="reset"
                    onclick="reset()">重置
            </button>
        </div>
        <div class="col-md-5">
            <button class="btn btn-primary btn-block" type="submit"
                    onclick="grounding()">上架
            </button>
        </div>
    </div>
</form>
</body>
<script>

    var input = document.querySelector('input.img');
    let file;
    input.addEventListener('change', function() {
        if(this.files.length){
            file = this.files[0];
            let reader = new FileReader();
            reader.onload = function(){
                console.log(this.result);
                document.getElementById('goodsImg').src = this.result;  // this.result 输入 图片的base64格式的数据
            };
            reader.readAsDataURL(file);
        }
    }, false);

    function grounding(){

        let a="/img/"+file.name;

        /*上架校验*/
        $("#groundingForm").validate({
            submitHandler: function (form) {
                /*校验成功，调用dogrounding*/
                dogrounding(a);
                // dogrounding2();
            }
        });
    }
    function dogrounding(a){
        g_showLoading();/*加载图标转圈圈*/
        $.ajax({
            url: "/grounding/dogrounding",/*调用后端接口*/
            type: "GET",
            data: {
                goodsName: $("#goodsName").val(),
                goodsTitle:$("#goodsTitle").val(),
                goodsImg:a,
                goodsDetail:$("#goodsDetail").val(),
                goodsPrice:$("#goodsPrice").val(),
                goodsStock:$("#goodsStock").val(),
                goodsCategory:$("#goodsCategory").val(),
                // seckillPrice:$("#seckillPrice").val(),
                // stockCount:$("#stockCount").val(),
                // startDate:$("#startDate").val(),
                // endDate:$("#endDate").val()
            },
            success: function (data) {
                layer.closeAll();
                // console.log(data)
                if (data.code == 200) {
                    //render(data.obj);
                    layer.msg("成功");
                    window.location.href = "/goods/toList2";
                } else {
                    layer.msg(data.message);
                }
            },
            error: function () {
                layer.closeAll();
            }
        });
    }
</script>
</html>